<template>
	<el-menu
		:default-active="route.path"
		class="el-menu-vertical-demo"
		:collapse="userStore.showMenu"
		:close-on-click-outside="false"
		:router="true"
		background-color="rgb(52,64,78)"
		text-color="#fff"
		active-text-color="#ffd04b"
		:unique-opened="true">
		<el-menu-item>
			<el-icon :size="30">
				<Operation />
			</el-icon>
			<template #title>
				<h1 class="title2">学生端</h1>
			</template>
		</el-menu-item>
		<el-divider border-style="solid" />

		<!-- 个人中心 -->
		<el-sub-menu index="1">
			<template #title>
				<el-icon><Setting /></el-icon>
				<span>个人中心</span>
			</template>
			<el-menu-item index="/home/stu_center" :class="route.path === '/home/stu_center' ? 'is-active' : ''">
				<el-icon><Avatar /></el-icon>
				<template #title>个人中心</template>
			</el-menu-item>

			<!--我的宿舍  -->
			<el-sub-menu index="1-1">
				<template #title>
					<el-icon><Menu /></el-icon>
					<span>我的宿舍</span>
				</template>
				<el-menu-item index="/home/mydom" :class="route.path === '/home/mydom' ? 'is-active' : ''"
					>我的宿舍</el-menu-item
				>
				<el-menu-item index="/home/changeDom" :class="route.path === '/home/changeDom' ? 'is-active' : ''"
					>更换寝室申请</el-menu-item
				>
				<el-menu-item index="/home/sanitary" :class="route.path === '/home/sanitary' ? 'is-active' : ''"
					>卫生检查记录</el-menu-item
				>
			</el-sub-menu>
		</el-sub-menu>

		<!-- 我的报修 -->
		<el-sub-menu index="2">
			<template #title>
				<el-icon><StarFilled /></el-icon>
				<span>我的报修</span>
			</template>
			<el-menu-item index="/home/myrepair" :class="route.path === '/home/myrepair' ? 'is-active' : ''"
				>我的报修记录</el-menu-item
			>
			<!--待添加 TODO -->
			<el-menu-item index="/home/repairReply" :class="route.path === '/home/repairReply' ? 'is-active' : ''"
				>报修申请</el-menu-item
			>
		</el-sub-menu>

		<!-- 电费缴纳 -->
		<el-sub-menu index="4">
			<template #title>
				<el-icon><MagicStick /></el-icon>
				<span>电费缴纳</span>
			</template>
			<el-menu-item index="/home/elinfo" :class="route.path === '/home/elinfo' ? 'is-active' : ''">
				<template #title>我的电费信息</template>
			</el-menu-item>
			<el-menu-item index="/home/fee" :class="route.path === '/home/fee' ? 'is-active' : ''">
				<template #title>电费缴纳</template>
			</el-menu-item>
		</el-sub-menu>

		<!-- 公告栏 -->

		<el-sub-menu index="6">
			<template #title>
				<el-icon><Memo /></el-icon>
				<span>公告与留言</span>
			</template>
			<el-menu-item index="/home/notice" :class="route.path === '/home/notice' ? 'is-active' : ''">
				<el-icon><List /></el-icon>
				<template #title>公告栏</template>
			</el-menu-item>
			<el-menu-item index="/home/words" :class="route.path === '/home/words' ? 'is-active' : ''">
				<el-icon><List /></el-icon>
				<template #title>留言管理</template>
			</el-menu-item>
		</el-sub-menu>

		<!-- 宿舍公共设施预约 -->
		<el-menu-item index="/home/public" :class="route.path === '/home/public' ? 'is-active' : ''">
			<el-icon><QuartzWatch /></el-icon>
			<template #title>宿舍公共设施预约</template>
		</el-menu-item>
		<!-- 假期申请记录 -->
		<el-menu-item index="/home/leave" :class="route.path === '/home/leave' ? 'is-active' : ''">
			<el-icon><Edit /></el-icon>
			假期申请记录
		</el-menu-item>
	</el-menu>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import { Menu } from '@element-plus/icons'

const userStore = useUserStore()
const route = useRoute()
</script>

<style scoped lang="scss">
h1.title2 {
	font-size: 25px;
}
.el-menu {
	height: calc(100vh - 71px);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	height: calc(100vh - 71px);
	.nav-switch {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
}

.el-menu {
	--el-menu-bg-color: rgb(0, 0, 0);
}

.el-sub-menu {
	&:deep(.el-menu) {
		background-color: #00000042;
	}
}
</style>
